<template>
  <div class="login_wrap">
    <div class="login_form">
      <div class="form_lt">
        <div class="form_lt_foot">
          <div class="form_button">
            <el-button @click="typeEmail" circle style="width: 50px; height: 50px">
              <IconSvg iconClass="email"></IconSvg>
            </el-button>
            <br />
            <span>邮箱注册</span>
          </div>
          <div class="form_button">
            <el-button type="primary" @click="typeWeiXin"> 微信扫码登录 </el-button>
          </div>
          <div class="form_button">
            <el-button type="primary" @click="typePhone">手机注册</el-button>
          </div>
        </div>
      </div>
      <div class="form_rt">
        <div class="form_title">
          <span v-show="registerType == 'phone'">手机号注册</span>
          <span v-show="registerType == 'email'">邮箱注册</span>
          <span v-show="registerType == 'weixin'">微信扫码登录</span>
        </div>
        <!--手机号注册        -->
        <el-form
          ref="ruleFormRef"
          :model="loginForm"
          :rules="rules"
          label-width="0px"
          status-icon
          class="form_box"
          v-show="registerType == 'phone'"
        >
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="User" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              placeholder="请输入密码"
              show-password
              prefix-icon="Lock"
            />
          </el-form-item>
          <el-form-item prop="passwordAgain">
            <el-input
              v-model="loginForm.passwordAgain"
              placeholder="请再次输入密码"
              show-password
              prefix-icon="Lock"
            />
          </el-form-item>
          <el-form-item prop="phonenumber">
            <el-input
              v-model="loginForm.phonenumber"
              placeholder="请输入手机号"
              show-password
              prefix-icon="Phone"
            />
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              v-model="loginForm.code"
              auto-complete="off"
              placeholder="验证码"
              style="width: 70%"
              @keyup.enter.native="handleLogin"
            >
              <template v-slot:prefix>
                <IconSvg iconClass="validCode"></IconSvg>
              </template>
            </el-input>
            <span style="width: 10%"></span>
            <el-button type="primary" style="width: 20%">60s发送</el-button>
          </el-form-item>
        </el-form>
        <!--邮箱注册       -->
        <el-form
          ref="ruleFormRef"
          :model="loginForm"
          :rules="rules"
          label-width="0px"
          status-icon
          class="form_box"
          v-show="registerType == 'email'"
        >
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="User" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              placeholder="请输入密码"
              show-password
              prefix-icon="Lock"
            />
          </el-form-item>
          <el-form-item prop="passwordAgain">
            <el-input
              v-model="loginForm.passwordAgain"
              placeholder="请再次输入密码"
              show-password
              prefix-icon="Lock"
            />
          </el-form-item>
          <el-form-item prop="email">
            <el-input
              v-model="loginForm.email"
              placeholder="请输入邮箱"
              show-password
              prefix-icon="Message"
            />
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              v-model="loginForm.code"
              auto-complete="off"
              placeholder="验证码"
              style="width: 70%"
              @keyup.enter.native="handleLogin"
            >
              <template v-slot:prefix>
                <IconSvg iconClass="validCode"></IconSvg>
              </template>
            </el-input>
            <span style="width: 10%"></span>
            <el-button type="primary" style="width: 20%">60s发送</el-button>
          </el-form-item>
        </el-form>

        <el-card v-show="registerType === 'weixin'">二维码</el-card>

        <div class="login_remember">
          <router-link class="linktype" :to="'/home'">首页</router-link>
          <router-link class="linktype" :to="'/login'"> 已有账号？返回登录 </router-link>
        </div>
        <div class="login_btn">
          <el-button type="primary" @click="handleLogin(ruleFormRef)"> 注册 </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import setting from '../../setting.ts'
  import { FormInstance, FormRules } from 'element-plus'
  import IconSvg from '@/components/IconSvg/index.vue'
  import Particle from '@/components/Particles/index.vue'

  const ruleFormRef = ref<FormInstance>()
  const captchaEnabled = ref(true)
  const loginForm = reactive({
    username: '',
    password: '',
    passwordAgain: '',
    phonenumber: '',
    email: '',
    code: '',
  })
  const rules = reactive<FormRules>({
    userName: [{ required: true, message: '请输入用户名', trigger: 'change' }],
    passWord: [
      {
        required: true,
        message: '请输入密码',
        trigger: 'change',
      },
      { min: 3, max: 20, message: '长度应为3-20', trigger: 'blur' },
    ],
  })

  let isRememberPW = ref(true)

  const handleLogin = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        await re().then((req) => {

        })
        console.log('isRememberPW', isRememberPW.value)
        console.log('ruleForm', loginForm)
      }
    })
  }



  const registerType = ref(setting.registerType)
  const typeEmail = () => {
    console.log('切换为邮箱')
    registerType.value = 'email'
  }
  const typePhone = () => {
    console.log('切换为手机')
    registerType.value = 'phone'
  }

  const typeWeiXin = () => {
    console.log('切换为微信扫码')
    registerType.value = 'weixin'
  }
</script>

<style lang="scss" scoped>
  .login_wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #e5e5e5;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .login_form {
      position: absolute;
      top: 50%;
      width: 950px;
      height: 500px;
      left: 50%;
      background-image: url('@/assets/image/login/login_form.png');
      background-size: 100% auto;
      background-repeat: no-repeat;
      transform: translate3d(-50%, -50%, 0);
      display: flex;
      border-radius: 20px;

      .form_lt {
        display: flex;
        flex: 1;
        background-image: url('@/assets/image/register/register_left.png');
        background-size: contain; /* 或者使用 contain 或 cover */
        background-repeat: no-repeat;
        margin: 60px 0 0 60px;

        .form_lt_foot {
          display: flex;
          width: 100%;
          height: 100px;
          background-color: red;
          bottom: 100px;
          margin-top: 70%;
          .form_button {
            width: 100px;
            margin: 50px 20px;
            background-color: black;
          }
        }

        .el-email-button {
          bottom: 10px;
        }
      }

      .form_rt {
        flex: 1;
        margin: 40px 40px;

        .login-logo {
          color: black;
          width: 100%;
          text-align: center;
          margin-bottom: 20px;

          img {
            width: 73px;
            height: 50px;
          }
        }

        .form_title {
          color: #444;
          font-weight: bold;
          font-size: 20px;
          text-align: center;
          align-items: center; /*元素对齐*/
        }

        .form_box {
          padding: 60px 0 0 40px;
          width: 340px;

          .login-code-img {
            height: 38px;
          }
        }

        .login_btn {
          padding: 10px 0 0 40px;
          width: 340px;

          .el-button {
            width: 100%;
          }
        }
      }

      .el-form-item {
        margin-bottom: 20px;
      }
    }
  }
</style>
